import { effectScope, onScopeDispose, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useEventListener } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import { useTabStore, useThemeStore } from '@/store'

/** 全局事件 */
export function useGlobalEvents() {
    const theme = useThemeStore()
    const tab = useTabStore()
    const route = useRoute()
    const { locale, t } = useI18n()
    const scope = effectScope()

    /** 页面离开时缓存多页签数据 */
    useEventListener(window, 'beforeunload', () => {
        theme.cacheThemeSettings()
        tab.cacheTabRoutes()
    })

    scope.run(() => {
        // 国际化切换时更新浏览器标签文本
        watch(
            () => locale.value,
            () => {
                document.title = (
                    route.meta.i18nTitle
                        ? t(route.meta.i18nTitle as string)
                        : route.meta.title
                ) as string
            }
        )
    })

    onScopeDispose(() => {
        scope.stop()
    })
}
